<template>
    <div class="qa"></div>
</template>

<script>
    //开红包问答红包弹窗组件
    export default {
        name: "DialogQa",
        data(){
            return {
                question:{},  //红包答题信息
                dialog:null,  //弹窗对象
                selected_answer:0, //当前选择的答案下标
                input_answer:"",  //填空题答案
                answer_correct:true   //用户的答案是否正确
            }
        },
        props:{
            //是否显示
            show:{
                type:Boolean,
                default:false
            },
            //红包id
            redId:{
                type:String,
            },
            //红包问题验证类型,0=未设置，1=选择题，2=填空题
            checkType:{
                type:Number
            }
        },
        watch:{
            show(value){
                if(value){
                    this.find()
                    .then(()=>{
                        this.createDialog();
                    });
                }
            }
        },
        methods:{
            //Run
            /**
             * 获取问题
             */
            find(){
                return new Promise((success)=>{
                    this.$url("redDetail/redQuestion",{
                        red_id:this.redId
                    })
                        .then((res)=>{
                            if(res.data.status === "success"){
                                this.question = res.data.data;
                                success();
                            }
                        });
                });
            },
            /**
             * 生成弹窗
             */
            createDialog(){
                let content = "";
                if(this.checkType === 1){
                    //选择题
                    content = this.createOptions();
                }else if(this.checkType === 2){
                    //填空题
                    content = this.createFillInput();
                }
                this.dialog = this.$createDialog({
                    type: 'confirm',
                    confirmBtn: {
                        text: '确认',
                        active: true
                    },
                    cancelBtn:{
                        text:'重开红包'
                    },
                    content,
                    onConfirm:()=>{
                        if(this.checkType === 1){
                            //选择题确认
                            if(!this.answer_correct){
                                //第一次回答不正确,则需要重开红包
                                this.$createToast({
                                    time: 1500,
                                    txt: '重开红包，再次答题',
                                    type:'error'
                                }).show();
                                this.dialog.show();
                            }else{
                                if(parseInt(this.question.answer) === this.selected_answer){
                                    this.$emit("correct");
                                }else{
                                    this.answer_correct = false;
                                    let error_html = document.createElement("span");
                                    dialog_dom.querySelector(".question-dialog-header").appendChild(error_html);
                                    dialog_dom.querySelector(".question-dialog-header span").innerHTML = `回答错误`;
                                    this.dialog.show();
                                }
                            }
                        }else if(this.checkType === 2){
                            //填空题
                            if(this.input_answer === this.question.answer){
                                this.$emit("correct");
                            }else{
                                let error_html = document.createElement("span");
                                dialog_dom.querySelector(".question-dialog-header").appendChild(error_html);
                                dialog_dom.querySelector(".question-dialog-header span").innerHTML = `回答错误`;
                                this.dialog.show();
                            }
                        }
                    },
                    onCancel:()=>{
                        //点击取消按钮
                        this.selected_answer = 0;
                        this.answer_correct = true;
                        let error_html = dialog_dom.querySelector(".question-dialog-header span");
                        if(error_html) error_html.innerHTML = "";
                        this.$emit("reset");
                    }
                },(createElement)=>{
                    return [
                        createElement('div',{
                            'class':{
                                'question-dialog-header':true
                            },
                            slot:'title'
                        })
                    ]
                });
                this.dialog.show();
                let dialog_doms = document.querySelectorAll(".cube-dialog");
                let dialog_dom = dialog_doms[dialog_doms.length-1];
                dialog_dom.querySelector(".question-dialog-header").innerHTML = `<p>${this.question.question}</p>`;
                if(this.checkType === 1){
                    this.bindSelectEvent(dialog_dom);
                }else{
                    this.bindInputEvent(dialog_dom);
                }
            },
            /**
             * 返回选择题创建选项
             */
            createOptions(){
                let content = ``;
                this.question.options.forEach((item,index)=>{
                    content += `
                                <label class="radios">
                                    <input type="radio" name="selected_answer" value="${index}" />
                                    <div class="select-box"></div>
                                    <div class="select-answer">${item}</div>
                                </label>
                                `;
                })
                return content;
            },
            /**
             * 返回填空题创建input
             */
            createFillInput(){
                let content = `
                                <input class="answer-input" type="text" placeholder="输入正确的答案开红包" />
                                `;
                return content;
            },
            /**
             *绑定选择题事件
             */
            bindSelectEvent(dialog_dom){
                let self = this;
                let radios = dialog_dom.querySelectorAll(".radios input");
                radios.forEach((item,index)=>{
                    if(index === 0){
                        radios[index].checked = true;
                        radios[index].parentNode.classList.add("selected");
                    }else{
                        radios[index].checked = false;
                        radios[index].parentNode.classList.remove("selected");
                    }
                    item.addEventListener("change",function(){
                        radios.forEach((_item)=>{
                            _item.checked = false;
                            _item.parentNode.classList.remove("selected");
                        });
                        self.selected_answer = index;
                        this.checked = true;
                        this.parentNode.classList.add("selected");
                    });
                });
            },
            /**
             * 绑定问答题输入答案事件
             */
            bindInputEvent(dialog_dom){
                let self = this;
                let answer_input = dialog_dom.querySelector(".answer-input");
                answer_input.value = "";
                answer_input.addEventListener("input",function(){
                    self.input_answer = this.value;
                });
                answer_input.addEventListener("blur",function(){
                    window.scroll(0,0);
                });
            }
        }
    }
</script>

<style lang="stylus">
    @import "./dialog-qa.styl"
</style>